<template>
  <div class="contextForm">
    <Form
      :model="formItem"
      :label-width="150"
      ref="formItem"
      :rules="ruleValidate"
      class="consumerForm"
    >
      <div class="item-title">{{reply_id?'编辑':'新建'}}客服会话</div>
      <FormItem label="客服会话名称" prop="name">
        <div class="flex">
          <Input v-model="formItem.name" placeholder="请输入客服会话名称" type="text" style="width:250px"></Input>
          <span>仅用于后台展示区分</span>
        </div>
      </FormItem>
      <FormItem label="入口标题" prop="title">
        <Input v-model="formItem.title" placeholder="请输入入口标题" type="text" style="width:250px" maxlength="18"></Input>
      </FormItem>
      <FormItem label="入口描述">
        <Input v-model="formItem.desc" placeholder="请输入入口描述" type="text" style="width:250px" maxlength="20"></Input>
      </FormItem>
      <FormItem label="入口图片" prop="img">
        <div v-if="formItem.img" class="brand-item-logo disFlex">
          <img :src="formItem.img">
          <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
        </div>
        <div
          v-else
          class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
          style="margin: 0;"
        >
          <span>+ 添加图片</span>
          <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
        </div>
        <span>添加栏入口图片，建议尺寸68*68</span>
      </FormItem>
      <FormItem label="回复关键字" prop="keyword">
        <div class="flex">
          <Input v-model="formItem.keyword" placeholder="请输入回复关键字" type="text" style="width:200px"></Input>
          <span>用户弹窗提示用户回复内容，获得相关二维码，可以输入数字或文字，不可超过十个字符</span>
        </div>
      </FormItem>
      <FormItem label="回复文字">
        <div class="flex">
          <Input
            v-model="formItem.reply_text"
            placeholder="请输入小程序名称"
            type="textarea"
            :autosize="{minRows: 5,maxRows: 10}"
            style="width:400px"
          ></Input>
          <span>用户回复后获得的文字内容</span>
        </div>
      </FormItem>
      <FormItem label="回复图片" prop="reply_image">
        <div v-if="formItem.reply_image" class="brand-item-logo disFlex">
          <img :src="formItem.reply_image">
          <upload :multiple="true" :spread="true" @confirmUpload="changeReply"></upload>
        </div>
        <div
          v-else
          class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
          style="margin: 0;"
        >
          <span>+ 添加图片</span>
          <upload :multiple="true" :spread="true" @confirmUpload="changeReply"></upload>
        </div>
        <span>用户回复后获得的图片，图片二维码宽高不小于1.5cm，添加完后建议识别一下二维码是否有效</span>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="MiniKeywordReplyCreate('formItem')" v-if="reply_id">保存</Button>
        <Button type="primary" @click="MiniKeywordReplyCreate('formItem')" v-else>新建</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import {
  MiniKeywordReplyEdit,
  MiniKeywordReplyCreate
} from "api/recuit/bussiness";
import upload from "base/upload/upload";
import Config from "@/config";
import Clipboard from "clipboard";

export default {
  name: "",
  data() {
    return {
      reply_id: "",
      formItem: {
        name: "",
        title: "",
        desc: "",
        img: "",
        keyword: "",
        reply_text: "",
        reply_image: "",
        display_status: 1
      },
      ruleValidate: {
        name: [{ required: true, message: "请输入客服会话名称" }],
        title: [{ required: true, message: "请输入入口标题" }],
        img: [{ required: true, message: "请上传入口图片" }],
        keyword: [{ required: true, message: "请输入回复关键字" }],
        reply_image: [{ required: true, message: "请上传回复图片" }]
      },
    };
  },
  components: {
    upload
  },
  mounted() {
    this.reply_id = this.$route.params.reply_id;
    this.getData();
  },
  methods: {
    getData() {
      let reply_id = this.reply_id;
      if (reply_id) {
        MiniKeywordReplyEdit({ reply_id })
          .then(result => {
            if (result.reply_text.indexOf("_br_") > -1) {
              result.reply_text = result.reply_text.split("_br_").join("\n");
            }
            this.formItem = result;
          })
          .catch(err => {});
      } else {
      }
    },
    //入口图片
    changeImg(_url) {
      this.formItem.img = _url[0];
    },
    //回复图片
    changeReply(_url) {
      this.formItem.reply_image = _url[0];
    },
    //更新保存数据
    MiniKeywordReplyCreate(name) {
      let dataJson = JSON.parse(JSON.stringify(this.formItem));
      this.$refs[name].validate(valid => {
        if (valid) {
          dataJson.reply_text = dataJson.reply_text.replace(
            /\r?\n|\r/gm,
            "_br_"
          );
          MiniKeywordReplyCreate(dataJson)
            .then(result => {
              if (this.reply_id) {
                this.$Message.success("保存成功");
              } else {
                this.$Message.success("创建成功");
              }
              setTimeout(() => {
                this.$router.push({
                  name: "communityList"
                });
              }, 1500);
            })
            .catch(err => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("信息未填写完善");
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.flex {
  display: flex;
  flex-direction: column;
}
.contextForm {
  padding: 2%;
  background: white;
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .alert {
    color: rgb(153, 153, 153);
    margin-top: 15px;
  }
}
.brand-item-logo {
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  // border-radius: 100px;
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;

  img {
    width: 100%;
    // border-radius: 100px;
  }
}
.brand-item-environment {
  width: 214px;
  height: 120px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-top: 10px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}

.old-brand-item-environment {
  margin-left: 0;
  cursor: pointer;
}

.new-add-brand-item-environment {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-left: 15px;
  cursor: pointer;
  width: 100px;
  height: 100px;
  margin-top: 29px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}
.input-wrapper {
  position: relative;
}
.input-wrapper .upload-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
}
</style>
